/*
  学习目标：Antd的使用
  步骤：
     1. npm i antd下拨
     3. 在index.js文件中导入样式
  学习目标：收集表单数据和设置初始值
  学习目标：cssModule解决样式冲突
  1. 样式文件命名为 xxx.module.scss 
  
  注意：
  1. 💥xxx.module.scss是固定语法，xxx随意命名，其它的不能动
  2. 通过js访问对象属性的方式去访问: .语法，styles[]
  3. 👍 推荐styles作为变量名
  学习目标：cssModule推荐写法
  学习目标：cssModule的使用注意事项
  注意：
     1. less css sass中都可以使用cssModule
     2. 中划线，可以修改为驼峰式命名，避免无法使用点语法 👎了解即可，不推荐
     3. react脚手架内置了css-modules的配置，其它项目需要借助插件
*/
import React, { Component } from 'react'
// 2. 导入组件，当做标签使用
import { Card ,Form, Input, Button, Checkbox,message} from 'antd';
import loginSrc from "assets/logo.png"
//  2. 使用JS的方式导入样式： import  from
import styles from "./index.module.scss";
import { login } from "api/user"
import { setToken } from 'utils/storage';
console.log('styles  ----->  ', styles);
export default class Login extends Component {
  /** 监听表单提交的回调函数 */
  handleSubmit=async(values)=>{
    try {
      const res=await login(values)
      // console.log('res', res);
      // 1 跳转路由
    // this.props.history.push('/')
    // 2 保存token
     // 💥先存token，后跳转路由
    setToken(res.data.token)
    this.props.history.push('/')
    // 3 提示用户
    message.success('登录成功',1)
  } catch (error) {
      // 4 处理失败的逻辑,error是对象
      // console.dir(error);
      message.warning(error.response.data.message,1)
    }

  }
  render() {
    return (
      // 3. 使用JS方式，访问类名
       // 3. 使用上，根元素仍使用styles.语法访问，其它后代类名仍旧使用字符串访问
      <div className={styles.login}>
          <Card className={styles.loginContainer}>
            <img src={loginSrc} className="login-logo"/>
            {/* 1. 通过监听onFinish事件，获取表单提交时的数据 */}
            <Form autoComplete="off"
            onFinish={this.handleSubmit}
            // 2.💥设置初始值， 初始值的字段和name的名称严格对应
            initialValues={{ mobile: '13811111111', code: '246810', agree: true }}
            >
                {/* 💥3. FormItem的rules要配合name字段使用，否则无效 */}
      <Form.Item name="mobile"
        rules={[
             //  2. 参考文档设置校验规则, 两种校验规则： 非空、号码长度验证
          {
            required: true,
            message: '手机号码不能为空',
          },
          {
              pattern:/^1[3-9]\d{9}$/,
              message:"手机号码格式错误"
          }
        ]}>
            {/* 1. 给Input加上placeholder */}
        <Input placeholder='请输入手机号'/>
      </Form.Item>

      <Form.Item name="code"
        rules={[
          {
            required: true,
            message: '验证码不能为空',
          },
          {
              pattern:/^\d{6}$/,
              message:"验证码格式错误"
          }
        ]}>
        <Input placeholder='请输入验证码'/>
      </Form.Item>

      <Form.Item name="agree"
       // 🔔 valuePropName表示使用checked属性值，去验证校验规则
       // validator是自定义校验函数
        valuePropName="checked"
        rules={[
          {
            validator: (_, value) =>
            // 判断value的值， 如果value存在，通过校验
            // 判断value的值， 如果value不存在，校验失败提示信息
              value ? Promise.resolve() : Promise.reject(new Error('请阅读并同意用户协议')),
          },
        ]}>
        <Checkbox>我已阅读并同意[用户协议]和[隐私条款]</Checkbox>
      </Form.Item>

      <Form.Item>
        <Button block type="primary" htmlType="submit">
          登录
        </Button>
      </Form.Item>
    </Form>
          </Card>
      </div>
    )
  }
}
